import React from 'react';
import {Layout, Space} from 'antd';
import Canvas from "@/pages/WorkFlowDesigner/Canvas";
import Toolbar from "@/pages/WorkFlowDesigner/Toolbar/Toobar";

const {Header, Content} = Layout;

const headerStyle: React.CSSProperties = {
    position: "sticky",  // 固定菜单栏
    top: 64,            // 黏性生效所需设置
    zIndex: 1,           // 保证菜单栏优先显示
    textAlign: 'center',// 这个设置好像没效果
    color: '#000',
    height: 48,
    paddingInline: 40,
    lineHeight: '48px',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    // 不透明度
};

const contentStyle: React.CSSProperties = {
    textAlign: 'center',
};

export default React.memo(() => (
    <Space direction="vertical" style={{width: '100%'}} size={[0, 48]}>
        <Layout>
            <Header style={headerStyle}><Toolbar/></Header>
            <Content style={contentStyle}><Canvas/></Content>
        </Layout>

    </Space>
));
